<template>
  <view>
    <uni-card v-if="!userifo.avatarUrl" class="login">
      <img src="/static/empty/default.png">

      <u-button @click="tologin()" type="primary" text="登录"></u-button>
      <!-- chatboxes-filled -->
      <u-button type="primary" @click="login" icon="chat">使用微信</u-button>
      <!-- <u-button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo" icon="chat">使用微信</u-button> -->
    </uni-card>
    <!-- 头像部分  -->
    <view v-if="userifo.avatarUrl" class="user-box">
      <u-row>
        <u-col span="4">
          <u-avatar :src="userifo.avatarUrl" size="80"></u-avatar>
        </u-col>
        <u-col span="6">
          <!-- <view class="u-font-18 u-p-b-20"> 默认的 </view> -->
          <view>昵称: {{userifo.nickName}}</view>
          <view v-if="userifo.phone" class="u-font-14 u-tips-color">手机号: {{userifo.phone}}</view>
        </u-col>
      </u-row>
    </view>

    <!-- 宫格 -->
    <view v-if="userifo.avatarUrl" class="center-nav">
      <uni-grid :show-border="false" :column="4" :highlight="true">
        <uni-grid-item v-for="(item,index) in navList" :key="index">
          <view class="grid-item-box" style="background-color: #fff;" @click="clickNav(item.url)">
            <u-icon :name="item.icon" color="#909399" size="50"></u-icon>
            <text class="text">{{item.name}}</text>
            <view v-if="item.badge" class="grid-dot">
              <uni-badge :text="item.badge" :type="item.type" />
            </view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <!-- 个人中心 -->
    <view v-if="userifo.avatarUrl" class="u-m-t-20">
      <u-cell-group>
        <u-cell icon="setting" title="个人信息" @click="toselinfo"></u-cell>
      </u-cell-group>
    </view>
    <view v-if="userifo.avatarUrl" class="u-m-t-20">
      <u-cell-group>
        <u-cell icon="level" :arrow="false" title="技术支持" value="1561214581" @click="callPhoneNumber"></u-cell>
        <u-cell icon="question-circle" title="常见问题" @click="problem"></u-cell>
        <u-cell icon="star" title="走进顽石" @click="aboutMe"></u-cell>
      </u-cell-group>
      <u-button text="退出" @click="logout"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  onShow() {
    // 页面展示,就获取保存在本地的用户名和头像
    let userifo = JSON.parse(uni.getStorageSync('userinfo') || '{}')
    this.userifo = userifo
    // 获取浏览信息
    this.showHistory()
    // 获取收藏信息
    this.showCollect()
    // 出售的信息
    this.showSale()
  },
  methods: {
    login() {
      uni.getUserInfo({
        provider: 'weixin',
        success: (infoRes) => {
          console.log(infoRes)
          this.userifo = infoRes.userInfo
          // 将用户的信息保存到本地
          uni.setStorageSync('userinfo', infoRes.rawData)
        }
      })
    },
    logout() {
      this.userifo ={}
      uni.clearStorage()
    },
    showHistory() {
      let historyList = JSON.parse(uni.getStorageSync('historyList') || '[]')
      this.navList[0].badge = historyList.length
    },
    showCollect() {
      let collectionList = JSON.parse(uni.getStorageSync('collectionList') || '[]')
      this.navList[1].badge = collectionList.length
    },
    showSale() {
      let saleList = JSON.parse(uni.getStorageSync('saleList') || '[]')
      this.navList[2].badge = saleList.length
    },
    tologin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    // 跳转到个人信息页面
    toselinfo() {
      if (this.userifo.id) {
        uni.navigateTo({
          url: '/pages/selfinfo/selfinfo'
        })
      } else {
        uni.showToast({
          icon: 'error',
          title: '微信用户不可以'
        })
      }
    },
    callPhoneNumber() {
      // 通过微信小程序发送电话
      uni.makePhoneCall({
        phoneNumber: '1561214581'
      })
    },
    clickNav(url) {
      uni.navigateTo({
        url: url
      })
    },
    problem() {
      uni.navigateTo({
        url: '/pages/center/question'
      })
    },
    aboutMe() {
      uni.navigateTo({
        url: '/pages/center/aboutMe'
      })
    }
  },
  data() {
    return {
      userifo: {},
      navList: [
        {
          name: '浏览记录',
          icon: 'checkmark-circle',
          url: '/pages/center/history',
          type: 'error'
        },
        {
          name: '我的收藏',
          icon: 'heart',
          url: '/pages/center/collect',
          type: 'error'
        },
        {
          name: '我的委托',
          icon: 'order',
          url: '/pages/center/trust',
          type: 'error'
        },
        {
          name: '问题反馈',
          icon: 'info-circle',
          url: '/pages/center/feedback'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  font: 800 14px 'Pingfang SC';
}
.login {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: space-around;
}
.user-box {
  margin-top: 40rpx;
  text-align: center;
  background-color: #fff;
  justify-content: space-between;
}
.uni-grid {
  .grid-item-box {
    flex: 1;
    // position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }
  .grid-dot {
    position: absolute;
    top: 5px;
    right: 15px;
  }
}

.qiandao {
  color: #606266;
  font-size: 24rpx;
  margin-right: 24rpx;
  margin-top: 54rpx;
  justify-content: center;
  align-items: center;
}

.clearBtn {
  margin: 0;
  padding: 0;
  line-height: 1;
  background-color: #ffffff;
}

.clearBtn::after {
  position: unset !important;
  border: unset;
}
</style>
